<!--
 * @Descripttion: 其他设置
 * @Author: DXV-RGWU-TUFH-RFCY-IEGMYY
 * @Date: 2020-07-06 12:17:07
 * @LastEditors: DXV-RGWU-TUFH-RFCY-IEGMYY
 * @LastEditTime: 2023-05-06 10:48:03
-->
<template>
  <div class="lb-system-wechat">
    <top-nav></top-nav>
    <div class="page-main">
      <el-form
        @submit.native.prevent
        :model="subForm"
        :rules="subFormRules"
        ref="subForm"
        label-width="170px"
        class="config-form"
      >
        <el-form-item label="行业服务人员名称" prop="attendant_name">
          <el-input
            v-model="subForm.attendant_name"
            maxlength="5"
            show-word-limit
            placeholder="请输入行业服务人员名称"
          ></el-input>
          <lb-tool-tips
          >该字段适用于修改不同行业服务人员的专职称呼，例如美甲师、维修人员、瑜伽老师、营养师等
            <div class="mt-sm">
              修改之后，后台和手机端所有关于服务人员的称呼将和输入的字段一致
            </div>
          </lb-tool-tips
          >
        </el-form-item>
        <el-form-item label="是否开启小程序审核模式" prop="is_xcx_sh">
          <el-switch
            v-model="subForm.is_xcx_sh"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </el-form-item>
        <el-form-item label="是否显示首页tips" prop="is_tips">
          <el-switch
            v-model="subForm.is_tips"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </el-form-item>
        <el-form-item label="首页展示类型" prop="home_server_type">
          <el-select
              @change="getTableDataList"
              v-model="subForm.home_server_type"
              placeholder="请选择"
          >
            <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <lb-classify-title
          title="底部Tabbar栏"
        ></lb-classify-title>
        <el-form-item>
          <div>
            <el-button type="success" :plain="true" @click="getDialog('add')">新增</el-button>
          </div>
          <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column prop="id" label="序号" width="100"></el-table-column>
            <el-table-column prop="name" label="名称" width="100"></el-table-column>
            <el-table-column prop="default_img" label="图标" width="180">
              <template slot-scope="scope">
                <img style="width: 50px;height: 50px;" :src="scope.row.default_img" alt="">
              </template>
            </el-table-column>
            <el-table-column prop="page" label="页面路径" width="180"></el-table-column>
            <el-table-column prop="old_color" label="图标初始颜色(仅支持SVG)" width="180"></el-table-column>
            <el-table-column prop="sort" label="排序" width="180"></el-table-column>
            <el-table-column prop="is_show" label="是否显示" width="180">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.is_show"
                  :active-value="1"
                  :inactive-value="0"
                  @change="getTabChange(scope.row, 'is_show')"
                  active-color="#13ce66"
                  inactive-color="#ff4949">
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column prop="is_web_show" label="H5是否显示" width="180">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.is_web_show"
                  :active-value="1"
                  :inactive-value="0"
                  @change="getTabChange(scope.row, 'is_web_show')"
                  active-color="#13ce66"
                  inactive-color="#ff4949">
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column prop="is_xcx_show" label="小程序是否显示" width="180">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.is_xcx_show"
                  :active-value="1"
                  :inactive-value="0"
                  @change="getTabChange(scope.row, 'is_xcx_show')"
                  active-color="#13ce66"
                  inactive-color="#ff4949">
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="200">
              <template slot-scope="scope">
                <el-button :plain="true" type="info" @click="getDialog('edit', scope.row)">编辑</el-button>
                <el-button :plain="true" type="danger" @click="getTabDel(scope.row.tab_id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <lb-classify-title
          v-if="false"
          title="首页金刚区"
        ></lb-classify-title>
        <el-form-item v-if="false">
          <div v-show="false">
            <el-button type="success" :plain="true" @click="getDialog2('add')">新增</el-button>
          </div>
          <el-table
            :data="tableData2"
            style="width: 100%">
            <el-table-column prop="title" label="标题" width="100"></el-table-column>
            <el-table-column prop="desc_content" label="副标题" width="200"></el-table-column>
            <el-table-column prop="background" label="背景色" width="200">
              <template slot-scope="scope">
                <div style="display: flex;flex-direction: row;align-items: center;">
                  <div style="width: 20px;height: 20px;border-radius: 50%;"
                       :style="{'background': scope.row.background}"></div>
                  <div style="margin-left: 10px;">{{ scope.row.background }}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="title_color" label="文字色" width="140">
              <template slot-scope="scope">
                <div style="display: flex;flex-direction: row;align-items: center;">
                  <div style="width: 20px;height: 20px;border-radius: 50%;"
                       :style="{'background': scope.row.title_color}"></div>
                  <div style="margin-left: 10px;">{{ scope.row.title_color }}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="page" label="跳转页面路径" width="200"></el-table-column>
            <el-table-column prop="openType" label="跳转页面方式" width="100"></el-table-column>
            <el-table-column prop="img" label="图标" width="180">
              <template slot-scope="scope">
                <img style="width: 50px;height: 50px;" :src="scope.row.img" alt="">
              </template>
            </el-table-column>
            <el-table-column prop="type" label="类型" width="180">
              <template slot-scope="scope">
                <span v-if="scope.row.type == 1">左</span>
                <span v-if="scope.row.type == 2">右</span>
              </template>
            </el-table-column>
            <el-table-column prop="sort" label="排序" width="180"></el-table-column>
            <el-table-column prop="is_show" label="是否显示" width="180">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.is_show"
                  :active-value="1"
                  :inactive-value="0"
                  @change="getJGChange(scope.row)"
                  active-color="#13ce66"
                  inactive-color="#ff4949">
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作">
              <template slot-scope="scope">
                <el-button :plain="true" type="info" @click="getDialog2('edit', scope.row)">编辑</el-button>
                <el-button v-show="false" :plain="true" type="danger" @click="getJGDel(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item>
          <lb-button type="primary" @click="submitForm" v-preventReClick>{{
              $t('action.submit')
            }}
          </lb-button>
        </el-form-item>
      </el-form>
    </div>
    <el-dialog :title="dialogFormVisibleTitle == 'edit' ? '编辑' : '添加'" :visible.sync="dialogFormVisible">
      <el-form :model="tab_form">
        <el-form-item label="序号" :label-width="formLabelWidth">
          <el-input v-model="tab_form.id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="名称" :label-width="formLabelWidth">
          <el-input v-model="tab_form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="页面路径" :label-width="formLabelWidth">
          <el-input v-model="tab_form.page" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="图标初始颜色(仅支持SVG)" :label-width="formLabelWidth">
          <el-input v-model="tab_form.old_color" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="图标" :label-width="formLabelWidth">
          <lb-cover
            :fileList="[{url: tab_form.default_img}]"
            @selectedFiles="getCover($event, 'default_img')"
          ></lb-cover>
        </el-form-item>
        <el-form-item label="排序" :label-width="formLabelWidth">
          <el-input v-model="tab_form.sort" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="getConfirm">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="dialogFormVisibleTitle2 == 'edit' ? '编辑' : '添加'" :visible.sync="dialogFormVisible2">
      <el-form :model="jg_form">
        <el-form-item label="标题" :label-width="formLabelWidth">
          <el-input v-model="jg_form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="副标题" :label-width="formLabelWidth">
          <el-input v-model="jg_form.desc_content" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="跳转页面路径" :label-width="formLabelWidth">
          <el-input v-model="jg_form.page" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="跳转页面方式" :label-width="formLabelWidth">
          <el-input v-model="jg_form.openType" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="图标" :label-width="formLabelWidth">
          <lb-cover
            :fileList="[{url: jg_form.img}]"
            @selectedFiles="getCover2($event, 'img')"
          ></lb-cover>
        </el-form-item>
        <el-form-item label="排序" :label-width="formLabelWidth">
          <el-input v-model="jg_form.sort" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="背景色" :label-width="formLabelWidth">
          <el-input v-model="jg_form.background" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="文字色" :label-width="formLabelWidth">
          <el-input v-model="jg_form.title_color" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="类型" :label-width="formLabelWidth">
          <el-select v-model="jg_form.type" placeholder="请选择类型">
            <el-option
              v-for="item in [{label: '左', value: 1}, {label: '右', value: 2}]"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="getConfirm2">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {mapMutations} from 'vuex'

export default {
  data() {
    return {
      statusOptions: [
        {
          label: '服务列表和'+ this.$t('action.attendantName') +'列表',
          value: 1
        },
        {
          label: '服务列表',
          value: 2
        },
        {
          label: this.$t('action.attendantName') + '列表',
          value: 3
        },
      ],
      default_img: 'https://lbqny.migugu.com/admin/anmo/mine/bg.png',
      colorList: [
        '#739bc6',
        '#60a06a',
        '#d4b64c',
        '#c09e51',
        '#d5964b',
        '#c26a51',
        '#ffb6b1',
        '#b0b4c7',
        '#616570'
      ],
      color: {
        service_btn_color: '',
        service_font_color: '',
        user_font_color: '',
        coach_font_color: ''
      },
      ind: {
        service_btn_color: 0,
        service_font_color: 0,
        user_font_color: 0,
        coach_font_color: 0
      },
      tab_form: {
        tab_id: 0,
        default_img: "",
        id: 0,
        is_show: 0,
        name: '',
        page: '',
        sort: 0,
        old_color: ''
      },
      jg_form: {
        id: 0,
        type: 0,
        title: '',
        desc_content: '',
        sort: 0,
        img: '',
        background: '',
        page: '',
        title_color: '',
        openType: ''
      },
      subForm: {
        home_server_type: 0,
        default_img: '',
        service_btn_color: '',
        service_font_color: '',
        user_font_color: '',
        user_image: [],
        coach_font_color: '',
        coach_image: [],
        is_xcx_sh: 0,
        attendant_name: '',
        is_tips: 0
      },
      subFormRules: {
        attendant_name: {
          required: true,
          validator: this.$reg.isNotNull,
          text: '行业服务人员名称',
          reg_type: 2,
          trigger: 'blur'
        },
        service_btn_color: {required: true, type: 'string', message: '请选择按钮颜色', trigger: 'blur'},
        service_font_color: {required: true, type: 'string', message: '请选择文字颜色', trigger: 'blur'},
        user_font_color: {required: true, type: 'string', message: '请选择文字颜色', trigger: 'blur'},
        user_image: {required: true, type: 'array', message: '请选择背景图', trigger: 'blur'},
        coach_font_color: {required: true, type: 'string', message: '请选择文字颜色', trigger: 'blur'},
        coach_image: {required: true, type: 'array', message: '请选择背景图', trigger: 'blur'}
      },
      tableData: [],
      dialogFormVisible: false,
      dialogFormVisibleTitle: '',
      formLabelWidth: '120px',
      tableData2: [],
      dialogFormVisible2: false,
      dialogFormVisibleTitle2: '',
    }
  },
  created() {
    this.getFormInfo()
  },
  methods: {
    ...mapMutations(['changeRoutesItem']),
    getTableDataList (res) {
      console.log('res',res)
    },
    getDialog(key, data) {
      console.log(key, data)
      this.dialogFormVisible = true
      if (key == 'edit') {
        this.dialogFormVisibleTitle = 'edit'
        this.tab_form = data
      } else {
        this.tab_form.tab_id = 0
        this.tab_form.default_img = ''
        this.tab_form.id = 0
        this.tab_form.is_show = 0
        this.tab_form.name = ''
        this.tab_form.page = ''
        this.tab_form.sort = 0
        this.tab_form.old_color = ''
        this.tab_form.dialogFormVisibleTitle = 'add'
      }
    },
    getDialog2(key, data) {
      this.dialogFormVisible2 = true
      console.log(data)
      if (key == 'edit') {
        this.dialogFormVisibleTitle2 = 'edit'
        this.jg_form = data
      } else {
        this.jg_form.id = 0
        this.jg_form.type = 0
        this.jg_form.title = ''
        this.jg_form.desc_content = ''
        this.jg_form.sort = 0
        this.jg_form.img = ''
        this.jg_form.background = ''
        this.jg_form.page = ''
        this.jg_form.title_color = ''
        this.jg_form.openType = ''
      }
    },
    async getConfirm() {
      this.dialogFormVisible = false
      if (this.dialogFormVisibleTitle == 'edit') {
        console.log(this.tab_form)
        let {code, data} = await this.$api.system.tabAddOREditTab(this.tab_form)
        if (code !== 200) return
        console.log(data, code)
        this.$message.success(data)
      } else {
        let {code, data} = await this.$api.system.tabAddOREditTab(this.tab_form)
        if (code !== 200) return
        console.log(data, code)
        this.$message.success(data)
      }
      await this.getFormInfo()
    },
    async getConfirm2() {
      this.dialogFormVisible2 = false
      let {code, data} = await this.$api.system.jgAddOREdit(this.jg_form)
      if (code !== 200) return
      this.$message.success(data)
    },
    async getTabChange(val, val2) {
      console.log(val, val2)
      let {code, data} = await this.$api.system.tabDisplay({tab_id: val.tab_id, param: val2})
      if (code !== 200) return
      this.$message.success(data)
    },
    async getJGChange(val, val2) {
      let {code, data} = await this.$api.system.jgDisplay({id: val.id})
      if (code !== 200) return
      this.$message.success(data)
    },
    async getTabDel(val) {
      let {code, data} = await this.$api.system.tabbarDel({tab_id: val})
      if (code !== 200) return
      this.$message.success(data)
      await this.getFormInfo()

    },
    async getJGDel(val) {
      console.log(val)
      let {code, data} = await this.$api.system.jgDel({id: val})
      if (code !== 200) return
      this.$message.success(data)
      await this.getFormInfo()
    },
    getCover(img, key) {
      this.tab_form[key] = img[0].attachment
      console.log(img, key)
    },
    getCover2(img, key) {
      this.jg_form[key] = img[0].attachment
    },
    async getFormInfo() {
      let {code, data} = await this.$api.system.configInfo()
      if (code !== 200) return
      let {
        service_btn_color: sbtn,
        service_font_color: sfont,
        user_font_color: ufont,
        coach_font_color: cfont,
        user_image: uimg,
        coach_image: cimg
      } = data
      data.service_btn_color = !sbtn ? '#282B34' : sbtn
      data.service_font_color = !sfont ? '#EBDDB1' : sfont
      data.user_font_color = !ufont ? '#ffffff' : ufont
      data.coach_font_color = !cfont ? '#ffffff' : cfont
      data.user_image = [{url: uimg || this.default_img}]
      data.coach_image = [{url: cimg || this.default_img}]
      this.tableData = data.tab_list
      this.tableData2 = data.home_menu_list
      let sbind = this.colorList.findIndex(item => {
        return item === data.service_btn_color
      })
      let sfind = this.colorList.findIndex(item => {
        return item === data.service_font_color
      })
      let uind = this.colorList.findIndex(item => {
        return item === data.user_font_color
      })
      let cind = this.colorList.findIndex(item => {
        return item === data.coach_font_color
      })
      if (sbind === -1) {
        sbind = 9
      }
      if (sfind === -1) {
        sfind = 9
      }
      if (uind === -1) {
        uind = 9
      }
      if (cind === -1) {
        cind = 9
      }
      this.ind.service_btn_color = sbind
      this.ind.service_font_color = sfind
      this.ind.user_font_color = uind
      this.ind.coach_font_color = cind
      this.color.service_btn_color = data.service_btn_color
      this.color.service_font_color = data.service_font_color
      this.color.user_font_color = data.user_font_color
      this.color.coach_font_color = data.coach_font_color
      for (let key in this.subForm) {
        this.subForm[key] = data[key]
      }
    },
    // getCover (img, key) {
    //   this.subForm[key] = img
    // },
    async changeIndex(index, key) {
      this.ind[key] = index
      this.subForm[key] = this.colorList[index]
    },
    changeColor(e, key) {
      this.subForm[key] = e
    },
    toReset(key) {
      if (key === 'service') {
        this.ind[`${key}_btn_color`] = 9
        this.ind[`${key}_font_color`] = 9
        this.color[`${key}_btn_color`] = '#282B34'
        this.color[`${key}_font_color`] = '#EBDDB1'
        this.subForm[`${key}_btn_color`] = '#282B34'
        this.subForm[`${key}_font_color`] = '#EBDDB1'
        this.submitForm()
        return
      }
      this.ind[`${key}_font_color`] = 9
      this.color[`${key}_font_color`] = '#ffffff'
      this.subForm[`${key}_font_color`] = '#ffffff'
      this.subForm[`${key}_image`] = [{url: this.default_img}]
      this.submitForm()
    },
    submitForm() {
      this.$refs['subForm'].validate(valid => {
        if (valid) {
          let subForm = JSON.parse(JSON.stringify(this.subForm))
          subForm.user_image = subForm.user_image[0].url
          subForm.coach_image = subForm.coach_image[0].url
          this.$api.system.configUpdate(subForm).then(res => {
            if (res.code === 200) {
              this.changeRoutesItem({key: 'attendant_name', val: subForm.attendant_name})
              this.$message.success(this.$t('tips.successSub'))
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep {
  .el-table__row {
    cursor: pointer;
  }
}

.lb-system-wechat {
  width: 100%;

  .config-form {
    .el-input {
      width: 300px;
    }

    .color-item {
      width: 40px;
      height: 58px;
      margin-right: 5px;
      padding-top: 4px;
      border: 1px solid white;
      cursor: pointer;

      .primaryColor {
        width: 28px;
        height: 28px;
        border-radius: 3px;
        border: 1px solid #e6e6e6;

        .color-bg {
          width: 20px;
          height: 20px;
          border-radius: 3px;
        }
      }

      .iconfont {
        color: #429dff;
        margin-top: 5px;
      }
    }

    .color-item.active {
      border: 1px solid #429dff;
      border-radius: 3px;
      box-shadow: 0px 4px 12px 1px rgba(66, 157, 255, 0.15);
    }
  }
}
</style>
